<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
        >
            <!-- <el-form-item label="任务ID" prop="processInstanceId">
        <el-input
          v-model="queryParams.processInstanceId"
          placeholder="请输入任务ID"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
            <el-form-item label="标题" prop="processInstanceName">
                <el-input
                    v-model="queryParams.processInstanceName"
                    placeholder="标题"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <!-- <el-form-item label="流程" prop="instanceId">
        <el-input
          v-model="queryParams.instanceId"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
            <el-form-item>
                <el-button
                    type="cyan"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
            ></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="taskList">
            <el-table-column label="ID" width="100" prop="processInstanceId" />
            <el-table-column label="流程" prop="processDefinitionName" />
            <el-table-column label="标题" prop="processInstanceName" />
            <el-table-column label="是否信创" prop="isXC">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.isXc == true" type="danger" effect="plain">信创</el-tag>
                    <el-tag v-else type="info" effect="plain">非信创</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="发起时间" width="160" prop="startTime" />
            <el-table-column label="发起人" prop="startUserNickName" />
            <el-table-column width="300" label="状态">
                <template slot-scope="scope">
                    <span
                        :style="{
                            color: scope.row.ended ? '#909399' : '#529cfd',
                        }"
                    >
                        {{ scope.row.state }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-search"
                        @click="details(scope.row)"
                        >详情</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-search"
                        @click="showHistory(scope.row)"
                        >审批历史</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="90%"
            append-to-body
        >
            <el-table v-loading="historyLoading" :data="historyList">
                <el-table-column
                    label="ID"
                    width="100"
                    prop="processInstanceId"
                />
                <el-table-column label="节点" prop="name" />
                <el-table-column label="处理人" prop="assigneeName" />
                <el-table-column label="开始时间" prop="startTime" />
                <el-table-column label="结束时间" prop="endTime" />
                <el-table-column label="处理方式" prop="actionName" />
                <el-table-column label="意见" prop="comment" />
            </el-table>

            <pagination
                v-show="historyTotal > 0"
                :total="historyTotal"
                :page.sync="historyParams.pageNum"
                :limit.sync="historyParams.pageSize"
                @pagination="getHistory"
            />
        </el-dialog>
    </div>
</template>

<script>
import request from "@/utils/request";
import ApplyAfter from "@/components/Activiti/ApplyAfter/index";
import { listHistory } from "@/api/activiti/example.js";
export default {
    name: "Done",
    components: {
        ApplyAfter,
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 已办表格数据
            taskList: [],
            // 弹出层标题
            title: "",
            // 审批历史表格数据
            historyList: [],
            // 查询审批历史参数
            historyParams: {
                pageNum: 1,
                pageSize: 10,
                processInstanceId: undefined,
            },
            // 审批历史总条数
            historyTotal: 0,
            // 遮罩层
            historyLoading: true,
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                processInstanceId: null,
                processDefinitionName: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {},
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // 详情
        details(data) {
            var arr=JSON.stringify(data)
            if (data.processDefinitionName == "资源申请") {
                if(data.isXc){
                    sessionStorage.setItem('applyDetails',arr)
                    this.$router.push("/todoItem/dones/applyDetails");
                }else{
                    sessionStorage.setItem('applyDetailsNoXc',arr)
                    this.$router.push("/todoItem/dones/applyDetailsNoXc");
                }
            }else if(data.processDefinitionName == "资源变更"){
                if(data.isXc){
                    sessionStorage.setItem('ChangeapplyDetails',arr)
                    this.$router.push("/todoItem/dones/ChangeapplyDetails");
                }else{
                    sessionStorage.setItem('ChangeapplyDetailsNoXc',arr)
                    this.$router.push("/todoItem/dones/ChangeapplyDetailsNoXc");
                }
            }else if(data.processInstanceName.indexOf("ip资源管理") != -1){
                sessionStorage.setItem('IPResourceManagersDonedetails',arr)
                this.$router.push("/resources/IPResourceManagers/Donedetails");
            }else if(data.processInstanceName.indexOf("应用故障") != -1){
                sessionStorage.setItem('ApplicationFailuresDonedetails',arr)
                this.$router.push("/faultdeclara/ApplicationFailures/Donedetails");
            }else if(data.processInstanceName.indexOf("操作系统") != -1){
                sessionStorage.setItem('systemFailuresDonedetails',arr)
                this.$router.push("/faultdeclara/systemFailures/Donedetails");
            }else if(data.processInstanceName.indexOf("网络故障") != -1){
                sessionStorage.setItem('NetworkFailuresDonedetails',arr)
                this.$router.push("/faultdeclara/NetworkFailures/Donedetails");
            }else if(data.processInstanceName.indexOf("云平台故障") != -1){
                sessionStorage.setItem('CloudFailuresDonedetails',arr)
                this.$router.push("/faultdeclara/CloudFailures/Donedetails");
            }else if(data.processInstanceName.indexOf("安全故障") != -1){
                sessionStorage.setItem('SafetyFailuresDonedetails',arr)
                this.$router.push("/faultdeclara/SafetyFailures/Donedetails");
            }else if(data.processInstanceName.indexOf("数据交互") != -1){
                sessionStorage.setItem('ArrayInteractionsDonedetails',arr)
                this.$router.push("/businessassistance/ArrayInteractions/Donedetails");
            }else if(data.processInstanceName.indexOf("端口管理") != -1){
                sessionStorage.setItem('InterfaceManagementsDonedetails',arr)
                this.$router.push("/businessassistance/InterfaceManagements/Donedetails");
            }else if(data.processInstanceName.indexOf("访问权限") != -1){
                sessionStorage.setItem('AccessRightssDonedetails',arr)
                this.$router.push("/businessassistance/AccessRightss/Donedetails");
            }else if(data.processInstanceName.indexOf("进出机房") != -1){
                sessionStorage.setItem('InOutComputerRoomsDonedetails',arr)
                this.$router.push("/businessassistance/InOutComputerRooms/Donedetails");
            }else if(data.processInstanceName.indexOf("系统升级/变更") != -1){
                sessionStorage.setItem('SystemUpgradesDonedetails',arr)
                this.$router.push("/businessassistance/SystemUpgrades/Donedetails");
            }else if(data.processInstanceName.indexOf("托管设备上下架") != -1){
                sessionStorage.setItem('ManagedDevicesDonedetails',arr)
                this.$router.push("/businessassistance/ManagedDevices/Donedetails");
            }else if(data.processInstanceName.indexOf("压力/安全测试") != -1){
                sessionStorage.setItem('PressureSafetyTestsDonedetails',arr)
                this.$router.push("/businessassistance/PressureSafetyTests/Donedetails");
            }else if(data.processInstanceName.indexOf("域名备案") != -1){
                sessionStorage.setItem('DomainNameFilingsDonedetails',arr)
                this.$router.push("/businessassistance/DomainNameFilings/Donedetails");
            }else if(data.processInstanceName.indexOf("找回备案号密码") != -1){
                sessionStorage.setItem('RetrieveRecordPasswordsDonedetails',arr)
                this.$router.push("/businessassistance/RetrieveRecordPasswords/Donedetails");
            }else if(data.processDefinitionName == "退云流程"){
              sessionStorage.setItem('retreatCloudsExamine',arr)
               this.$router.push("/resources/retreatClouds/details/" + data.processInstanceId);
            }else if(data.processInstanceName.indexOf("其他事项") != -1){
                sessionStorage.setItem('OtherMatterssDonedetails',arr)
                this.$router.push("/businessassistance/OtherMatterss/Donedetails");
            }
        },
        /** 查询审批历史 */
        showHistory(data) {
            this.historyList = [];
            this.title = data.processDefinitionName;
            this.open = true;
            this.historyParams = {
                pageNum: 1,
                pageSize: 10,
                processInstanceId: data.processInstanceId,
            };
            this.getHistory();
        },
        getHistory() {
            this.historyLoading = true;
            listHistory(this.historyParams).then((response) => {
                this.historyList = response.rows;
                this.historyTotal = response.total;
                this.historyLoading = false;
            });
        },

        /** 查询已办列表 */
        getList() {
            this.loading = true;
            return request({
                url: "/task/taskDoneList",
                method: "get",
                params: this.queryParams,
            })
                .then((response) => {
                    this.taskList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                })
                .then(() => {});
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                taskId: null,
                taskName: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.id);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加已办";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids;
            getDemo(id).then((response) => {
                this.form = response.data;
                this.open = true;
                this.title = "修改已办";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        updateDemo(this.form).then((response) => {
                            this.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addDemo(this.form).then((response) => {
                            this.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm(
                '是否确认删除已办编号为"' + ids + '"的数据项?',
                "警告",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(function () {
                    return delDemo(ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess("删除成功");
                });
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有已办数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(function () {
                    return exportDemo(queryParams);
                })
                .then((response) => {
                    this.download(response.msg);
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.el-table{
    color: #000;
}
</style>
